// pages/home-music/home-music.js
import {reqgetBannersList, reqgetHotSongsList} from "../../service/homeMusic"
import querySelect from "../../utils/query-select"
// import throttle from "../../utils/throttle" // codewhy封装
import {throttle} from "underscore"  
import recommendStore from "../../store/recomment"
import rankingStore, {rankingsMap} from "../../store/rankingStore"
import playerStore from "../../store/playerStore"
const querySelectThrottle = throttle(querySelect, 100)
Page({
  data: {
    searchValue: '',
    banners: [],
    bannerHeight: 120,
    recommendList: [],
    hotSongsList: [],
    recommendSongs: [],
    screenWidth: 375,
    rankingInfos: {},
    isRankingData: false
  },
  onLoad(options) {
    this.getBannersList()
    // this.getRecommendList()
    this.getHotSongsList()

    const app = getApp()
    this.setData({ screenWidth: app.globalData.screenWidth })

    // 派发action
    recommendStore.dispatch("getRecommendList")
    recommendStore.onState("recommendList", this.handleRecommendSongs)
    rankingStore.dispatch("getRankingDataAction")

    // rankingStore.onState("newRanking", this.handleNewRanking)
    // rankingStore.onState("originRanking", this.handleOriginRanking)
    // rankingStore.onState("upRanking", this.handleUpRanking)
    for(const ranking in rankingsMap){
      rankingStore.onState(ranking, this.handleRanking(ranking))
    }
  },
  // 发送网络请求获取轮播图数据
  async getBannersList(){
    const res = await reqgetBannersList()
    this.setData({banners: res.banners})
  },
  // 点击搜索框跳转搜索详情页
  toSerachDetail(){
    wx.navigateTo({
      url: '/pages/search-detail/search-detail',
    })
  },
  // 轮播图加载完毕，监听获取高度
  // 多张轮播图，会执行多次，应该使用节流
  onBannerImageLoad(event){
    querySelectThrottle(".banner-image").then(res => {
      this.setData({bannerHeight: res[0].height})
    })
  },
  // 推荐歌曲点击更多
  toRecommendDetail(){
    wx.navigateTo({
      url: '/pages/song-detail/song-detail?type=recommend',
    })
  },
  // 获取热门歌单
  async getHotSongsList(){
    reqgetHotSongsList().then(res => {
      this.setData({hotSongsList: res.playlists})
    })
    reqgetHotSongsList("华语 ").then(res => {
      this.setData({recommendSongs: res.playlists})
    })
  },
  onSongItemTap(event) {
    const index = event.currentTarget.dataset.index
    playerStore.setState("playSongList", this.data.recommendList)
    playerStore.setState("playSongIndex", index)
  },

  // =======================stroe中获取数据==================
  handleRecommendSongs(value){
    if (!value.tracks) return
    this.setData({ recommendList: value.tracks.slice(0, 6) })
  },

  // handleNewRanking(value){
  //   const newRankingInfos = {...this.data.rankingInfos, newRanking: value}
  //   this.setData({rankingInfos: newRankingInfos})
  // },
  // handleOriginRanking(value){
  //   const newRankingInfos = {...this.data.rankingInfos, originRanking: value}
  //   this.setData({rankingInfos: newRankingInfos})
  // },
  // handleUpRanking(value){
  //   const newRankingInfos = {...this.data.rankingInfos, upRanking: value}
  //   this.setData({rankingInfos: newRankingInfos})
  // },
  // 上面三个函数从rankingStore中获取数据封装成一个函数：
  handleRanking(ranking){
    return value => {
      const newRankingInfos = {...this.data.rankingInfos, [ranking]: value}
      this.setData({rankingInfos: newRankingInfos, isRankingData: true})
    }
  },
  onUnload(){
    recommendStore.offState("recommendList", this.handleRecommendSongs)

    // rankingStore.offState("newRanking", this.handleNewRamking)
    // rankingStore.offState("originRanking", this.handleOriginRanking)
    // rankingStore.offState("upRanking", this.handleUpRanking) 
    for(const ranking in rankingsMap) {
      rankingStore.offState(ranking, this.handleRanking(ranking))
    }
    this.setData({isRankingData: false})
  }
})